<template>
    <div class="version-contrast-view">

      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="列表模式" name="list">

          <el-row :gutter="10">
            <el-col :span="12">
              <div class="select-view">
                <el-select v-model="value1" placeholder="请选择版本" @change="selectChange1">
                  <el-option
                    v-for="item in list"
                    :key="item.id"
                    :label="item.baseline_no"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>

              <el-table
                size="medium"
                :data="data1.project_task"
                row-key="id"
                default-expand-all
                border>
                <el-table-column
                  align="center"
                  type="index"
                  label="序号"
                  width="50">
                </el-table-column>
                <el-table-column
                  label="任务名称">
                  <template slot-scope="scope">

                    <span v-if="(!scope.row.children || !scope.row.children.length) && scope.row.level == 1" style="padding-left: 25px">  </span>
                    <span>{{scope.row.task_name}}</span>

                    <el-popover
                      v-if="typeTask[scope.row.task_name] == 1"
                      placement="top-start"
                      width="70"
                      trigger="hover">
                      <div style="color: unset">
                        变更任务
                      </div>
                      <i slot="reference" class="el-icon-s-opportunity" style="color: red;margin-left: 10px"></i>
                    </el-popover>

                    <el-popover
                      v-if="typeTask[scope.row.task_name] == 2"
                      placement="top-start"
                      width="70"
                      trigger="hover">
                      <div style="color: unset">
                        新增任务
                      </div>
                      <i slot="reference" class="el-icon-s-opportunity" style="color: green;margin-left: 10px"></i>
                    </el-popover>

                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="duration"
                  label="工期（天）"
                  width="100">
                </el-table-column>
                <el-table-column
                  align="center"
                  label="计划开始时间"
                  width="150">
                  <template slot-scope="scope">
                    {{scope.row.start_date ? dateFormat1('yyyy-mm-dd',scope.row.start_date) : ""}}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="计划结束时间"
                  width="150">
                  <template slot-scope="scope">

                    {{scope.row.end_date ? dateFormat1('yyyy-mm-dd',scope.row.end_date) : ""}}
                  </template>
                </el-table-column>
              </el-table>


            </el-col>
            <el-col :span="12">
              <div class="select-view">
                <el-select v-model="value2" placeholder="请选择版本" @change="selectChange2">
                  <el-option
                    v-for="item in list"
                    :key="item.id"
                    :label="item.baseline_no"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>

              <el-table
                size="medium"
                :data="data2.project_task"
                row-key="id"
                default-expand-all
                border>
                <el-table-column
                  align="center"
                  type="index"
                  label="序号"
                  width="50">
                </el-table-column>
                <el-table-column
                  prop="task_name"
                  label="任务名称">
                  <template slot-scope="scope">

                    <span v-if="(!scope.row.children || !scope.row.children.length) && scope.row.level == 1" style="padding-left: 25px">  </span>
                    <span>{{scope.row.task_name}}</span>

                    <el-popover
                      v-if="typeTask[scope.row.task_name] == 1"
                      placement="top-start"
                      width="70"
                      trigger="hover">
                      <div style="color: unset">
                        变更任务
                      </div>
                      <i slot="reference" class="el-icon-s-opportunity" style="color: red;margin-left: 10px"></i>
                    </el-popover>

                    <el-popover
                      v-if="typeTask[scope.row.task_name] == 2"
                      placement="top-start"
                      width="70"
                      trigger="hover">
                      <div style="color: unset">
                        新增任务
                      </div>
                      <i slot="reference" class="el-icon-s-opportunity" style="color: green;margin-left: 10px"></i>
                    </el-popover>

                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="duration"
                  label="工期（天）"
                  width="100">
                </el-table-column>
                <el-table-column
                  align="center"
                  label="计划开始时间"
                  width="150">
                  <template slot-scope="scope">
                    {{scope.row.start_date ? dateFormat1('yyyy-mm-dd',scope.row.start_date) : ""}}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="计划结束时间"
                  width="150">
                  <template slot-scope="scope">

                    {{scope.row.end_date ? dateFormat1('yyyy-mm-dd',scope.row.end_date) : ""}}
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>

        </el-tab-pane>
        <el-tab-pane label="图表模式" name="chart">
          <el-row :gutter="10">
            <el-col :span="12">
              <div class="select-view">
                <el-select v-model="value1" placeholder="请选择版本" @change="selectChange1">
                  <el-option
                    v-for="item in list"
                    :key="item.id"
                    :label="item.baseline_no"
                    :value="item.id">
                  </el-option>
                </el-select>

                <el-select style="padding-left: 20px" v-model="typeValue1" placeholder="请选择" @change="typeChange">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>

            </el-col>
            <el-col :span="12">
              <div class="select-view">
                <el-select v-model="value2" placeholder="请选择版本" @change="selectChange2">
                  <el-option
                    v-for="item in list"
                    :key="item.id"
                    :label="item.baseline_no"
                    :value="item.id">
                  </el-option>
                </el-select>

                <el-select style="padding-left: 20px" v-model="typeValue2" placeholder="请选择" @change="typeChange">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>

            </el-col>
          </el-row>



          <div id="myChart" :style="{width: '1200px', height: '700px'}"></div>

<!--          <div id="myChart" style="width: 100%;height: 700px;min-width: 1200px"></div>-->

        </el-tab-pane>

      </el-tabs>

    </div>
</template>

<script>
    export default {
        name: "versionContrast",
        props:{
            list:Array
        },
        data:function () {
            return{
                activeName:'list',
                options: [],
                options1: [{
                    value: '1',
                    label: '计划时间'
                }, {
                    value: '2',
                    label: '实际时间'
                }, ],
                typeValue1:'1',
                typeValue2:'1',
                value1: '',
                value2:'',
                tableData:[],

                data1:{},
                data2:{},

                myChart:null,

                typeTask:{}
            }
        },
        mounted:function(){
            this.drawLine();
        },
        methods:{
            selectChange1:function(id){
                let index = this.list.findIndex(a=>a.id == id)
                if (index != -1){
                    let data = this.list[index]
                    this.data1 = data;

                    if (this.activeName == 'chart'){
                        this.createOption();
                    }else{
                        this.dealTaskDate()
                    }

                }
            },
            typeChange:function(){
                //this.createOption();

            },
            selectChange2:function(id){
                let index = this.list.findIndex(a=>a.id == id)
                if (index != -1){
                    let data = this.list[index]
                    this.data2 = data;

                    if (this.activeName == 'chart'){
                        this.createOption();
                    }else {
                        this.dealTaskDate()
                    }
                }
            },
            dealTaskDate:function(){
                this.typeTask = {}
                if (this.data1.project_task && this.data2.project_task){
                    let data1 = this.createDate(this.data1)

                    let data2 = this.createDate(this.data2)

                    if (data1.name >= data2.name.length ){
                        data1.name.forEach(name => {

                            if (data2.dic[name]){
                                if ((data2.dic[name].duration == data1.dic[name].duration) && (data2.dic[name].start_date == data1.dic[name].start_date)){
                                    this.typeTask[name] = 0
                                }else {
                                    this.typeTask[name] = 1
                                }
                            }else {
                                this.typeTask[name] = 2
                            }
                        })
                    }else{
                        data2.name.forEach(name => {
                            if (data1.dic[name]){
                                if ((data2.dic[name].duration == data1.dic[name].duration) && (data2.dic[name].start_date == data1.dic[name].start_date)){
                                    this.typeTask[name] = 0
                                }else {
                                    this.typeTask[name] = 1
                                }
                            }else {
                                this.typeTask[name] = 2
                            }
                        })
                    }
                }
            },
            createOption:function(){
                let data1 = this.createDate(this.data1)

                let data2 = this.createDate(this.data2)

                let title = data1.title.concat(data2.title)

                let xAxis = data1.name.length >= data2.name.length ? data1.name : data2.name

                let series = []

                if (data1.dic){
                    let start = {
                        name: data1.title[0],
                        type: 'line',
                        stack: '总量1',
                        data:[]
                    }
                    let end = {
                        name: data1.title[1],
                        type: 'line',
                        stack: '总量1',
                        data:[]
                    }
                    xAxis.forEach(name=>{
                        if (data1.dic[name]){
                            let date = new Date(data1.dic[name].start_date.replace(/-/g,'/'));
                            let date1 = new Date(data1.dic[name].end_date.replace(/-/g,'/'));
                            if (this.typeValue1 == 2){
                                date = data1.dic[name].real_start_date ? new Date(data1.dic[name].real_start_date.replace(/-/g,'/')) : "";
                                date1 = data1.dic[name].real_end_date ? new Date(data1.dic[name].real_end_date.replace(/-/g,'/')) : "";
                            }
                            if (date){
                                start.data.push(this.dealDateStr(date));
                            }else {
                                start.data.push("")
                            }
                            if (date1){
                                end.data.push(this.dealDateStr(date1));
                            }else{
                                end.data.push("")
                            }

                        }else {
                            start.data.push("")
                            end.data.push("")
                        }
                    })
                    series.push(start)
                    series.push(end)
                }

                if (data2.dic){
                    let start = {
                        name: data2.title[0],
                        type: 'line',
                        stack: '总量1',
                        data:[]
                    }
                    let end = {
                        name: data2.title[1],
                        type: 'line',
                        stack: '总量1',
                        data:[]
                    }
                    xAxis.forEach(name=>{
                        if (data2.dic[name]){
                            let date = new Date(data2.dic[name].start_date.replace(/-/g,'/'));
                            let date1 = new Date(data2.dic[name].end_date.replace(/-/g,'/'));
                            if (this.typeValue2 == 2){
                                date = data1.dic[name].real_start_date ? new Date(data1.dic[name].real_start_date.replace(/-/g,'/')) : "";
                                date1 = data1.dic[name].real_end_date ? new Date(data1.dic[name].real_end_date.replace(/-/g,'/')) : "";
                            }
                            if (date){
                                start.data.push(this.dealDateStr(date));
                            }else {
                                start.data.push("")
                            }
                            if (date1){
                                end.data.push(this.dealDateStr(date1));
                            }else{
                                end.data.push("")
                            }
                        }else {
                            start.data.push("")
                            end.data.push("")
                        }
                    })
                    series.push(start)
                    series.push(end)
                }

                let option = {
                    title: {
                        text: '比较图表'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    color: ['#d48265', '#d48265','#91c7ae',  '#91c7ae'],
                    legend: {
                        data: title
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis
                    },
                    yAxis: {
                        type: 'time',
                        // data: ['2021-03-01', '2021-03-05', '2021-03-12','2021-03-15', '2021-03-19','2021-03-21', '2021-03-28', '2021-04-03','2021-04-07', '2021-04-09','2021-04-14','2021-04-17',
                        //     '2021-04-19','2021-04-21','2021-04-24','2021-04-29','2021-05-02','2021-05-05','2021-05-12','2021-05-19','2021-05-22','2021-05-27','2021-05-30']
                    },
                    series: series
                }

                this.myChart.setOption(option)

            },
            dealDateStr:function(date){
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                if (month < 10){
                    month = "0" + month
                }
                if (day < 10){
                    day = "0" + day;
                }

                return year + "-" + month + "-" + day
            },
            createDate:function(data){
                let a = {
                    dic:null,
                    name:[],
                    title:[]
                }
                if (data.project_task && data.project_task.length){
                    a = this.dealTask(data.project_task)
                    a.title = [data.baseline_no + "开始",data.baseline_no + "结束"]
                }

                return a
            },
            dealTask:function(list){
                let data = {
                    name:[],
                    dic:{}
                }

                for (let i = 0; i < list.length; i++){
                    let task = list[i]
                    data.name.push(task.task_name)
                    data.dic[task.task_name] = {...task}
                    if (task.children && task.children.length){
                        let d = this.dealTask(task.children)
                        data.name = data.name.concat(d.name)
                        let a = {...data.dic,...d.dic};
                        data.dic = a;
                    }
                }

                return data;
            },
            handleClick:function () {
                if (this.activeName == 'chart'){
                    this.createOption();
                }else {
                    this.dealTaskDate()
                }
            },
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                this.myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                // this.myChart.setOption({
                //     title: {
                //         text: '比较图表'
                //     },
                //     tooltip: {
                //         trigger: 'axis'
                //     },
                //     color: ['#d48265', '#d48265','#91c7ae',  '#91c7ae'],
                //     legend: {
                //         data: ['版本1开始','版本1结束', '版本2开始','版本2结束']
                //     },
                //     grid: {
                //         left: '3%',
                //         right: '4%',
                //         bottom: '3%',
                //         containLabel: true
                //     },
                //     toolbox: {
                //         feature: {
                //             saveAsImage: {}
                //         }
                //     },
                //     xAxis: {
                //         type: 'category',
                //         boundaryGap: false,
                //         data: ['里程碑1', '任务1', '任务2', '任务3', '里程碑2', '任务4', '任务5','里程碑3','任务5']
                //     },
                //     yAxis: {
                //         type: 'time',
                //         // data: ['2021-03-01', '2021-03-05', '2021-03-12','2021-03-15', '2021-03-19','2021-03-21', '2021-03-28', '2021-04-03','2021-04-07', '2021-04-09','2021-04-14','2021-04-17',
                //         //     '2021-04-19','2021-04-21','2021-04-24','2021-04-29','2021-05-02','2021-05-05','2021-05-12','2021-05-19','2021-05-22','2021-05-27','2021-05-30']
                //     },
                //     series: [
                //         {
                //             name: '版本1开始',
                //             type: 'line',
                //             stack: '总量1',
                //
                //             data: ['2021-03-01', '2021-03-12', '2021-03-21', '2021-04-09', '2021-04-17', '2021-04-24', '2021-05-05','2021-05-19','2021-05-22']
                //         },
                //         {
                //             name: '版本1结束',
                //             type: 'line',
                //             stack: '总量1',
                //             data: ['2021-03-05', '2021-03-21', '2021-03-28', '2021-04-14', '2021-04-24', '2021-04-29', '2021-05-12','2021-05-27','2021-05-30']
                //         },
                //         {
                //             name: '版本2开始',
                //             type: 'line',
                //             stack: '总量2',
                //             data: ['2021-03-05', '2021-03-12', '2021-03-21', '2021-04-03', '2021-04-07', '2021-04-14', '','2021-05-02','2021-05-12'],
                //             connectNulls:true
                //         },
                //         {
                //             name: '版本2结束',
                //             type: 'line',
                //             stack: '总量2',
                //             data: ['2021-03-15', '2021-03-19', '2021-03-28', '2021-04-09', '2021-04-14', '2021-04-19', '2021-04-29','2021-05-12','2021-05-22']
                //         }
                //
                //     ]
                // });

            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/views/projectManagement/list/details/versionContrastView.scss";
</style>
